<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'客户详情'}"></header-top>
		<view class="mainpadding">
			<view class="customer-detail ffffff radius mainpadding">
				<view class="over">
					<!-- 已完成 -->
					<image v-show="customerinfo.cj_status" src="../../static/imags/all/over.png" mode=""></image>
					<!-- 未完成 -->
					<image v-show="!customerinfo.cj_status" src="../../static/imags/all/noover.png" mode=""></image>
				</view>
				<view class="strongtext_top">{{customerinfo.name}}（{{customerinfo.name}}）</view>
				<view class="flexleft margin_top">
					<text>注册时间：</text>
					<text class="strongtext">{{customerinfo.create_time_text}}</text>
				</view>
				<view class="flexleft margin_top">
					<text>套餐：</text>
					<text class="strongtext">{{customerinfo.thaliinfo.thali_name}}</text>
				</view>
				<view class="flexleft margin_top">
					<text>意向度：</text>
					<text class="strongtext">{{customerinfo.intention.name}}</text>
				</view>
				<view class="flexleft margin_top">
					<text>到期天数：</text>
					<text class="strongtext">{{customerinfo.end_days}}天</text>
				</view>
				<view class="flexleft margin_top">
					<text>手机号：</text>
					<view class="flexleft" @click="phone(customerinfo.tel)">
						<text class="strongtext">{{customerinfo.tel}}</text>
						<view class="callphone"></view>
					</view>
				</view>
				<view class="address margin_top">
					<text style="flex: 3;">客户地址：</text>
					<view style="flex: 9;overflow: hidden;" @click="openlocation">
						<text class="strongtext">{{customerinfo.cityinfo}}{{customerinfo.address_detail}}</text>
						<view class="addressicon"></view>
					</view>
				</view>
				<view class="flexleft margin_top">
					<text>经营区域：</text>
					<text class="strongtext">{{customerinfo.jyqy}}</text>
				</view>
				<view class="flexleft margin_top">
					<text>行业：</text>
					<text class="strongtext">{{customerinfo.industry.name}}</text>
				</view>
				<view class="flexleft margin_top">
					<text>规模等级：</text>
					<text class="strongtext">{{customerinfo.scalelevel.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				customerid:"",
				customerinfo:{},
				pageShow:false
			}
		},
		onLoad(options) {
			this.customerid = options.id
			this.getinfo()
		},
		methods: {
			getinfo(){
				httpRequest.request('/employeesapi/shop/detail', 'POST', {
					id:this.customerid
				}).then(res => {
					this.customerinfo = res.data
					this.pageShow = true
				})
			},
			openlocation(){
				uni.openLocation({
				     latitude: Number(this.customerinfo.latitude),//即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
				     longitude:Number(this.customerinfo.longitude),//即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
				     name: this.customerinfo.name,//即将传到高德或腾讯地图的店铺名称
				     address: this.customerinfo.cityinfo + this.customerinfo.address_detail,//即将传到高德或腾讯地图的详细地址
				     scale: 18
				})
			},
			// 打电话
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.customer-detail{
		position: relative;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
	}
	.strongtext_top{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333;
	}
	.strongtext{
		color: #333;
	}
	.address{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.addressicon{
		float: right;
	}
	.over{
		width: 100rpx;height: 100rpx;
		position: absolute;
		right: 0;
		top: 0;
		image{
			width: 100%;
			height: 100%;
		}
		// background-image: url('@/static/imags/all/over.png');
		// background-size: 100% 100%;
	}
</style>
